import type { GreasyForkElements } from '../../../../../../../../types/constants/personalization/greasy_fork'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import {
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'

export class BianListPage {
  elements: GreasyForkElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.BIAN]
  private static instance: BianListPage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): BianListPage {
    if (!BianListPage.instance) {
      BianListPage.instance = new BianListPage()
    }
    return BianListPage.instance
  }

  init(): void {}

  getMainStyles(): string {
    return `
/* 脚本组件样式 */
.wrap #main .slist ul .mbf-page-separator {
  margin-bottom: 10px !important;
  width: calc(100% - 15px) !important;
  min-width: unset !important;
}

.wrap {
  #main {
    .slist ul li {
      border-radius: 4px;
      
      &:hover b {
        background: linear-gradient(135deg, #9C27B0 0%, #673AB7 50%, #E91E63 100%) !important;
        color: #fff !important;
        display: block !important;
      }
      
      b {
        display: none !important;
        height: auto !important;
        line-height: 1.8 !important;
        font-size: 13px;
      }
    }
    
    .page {
      input[type="text"] {
        outline: none !important;
      }
    }
  }
  
  .link {
    .title {
      color: var(${this.themeVarService.default.text.secondary}) !important;
      border-bottom-color: var(${this.themeVarService.default.border.colorNeutral}) !important;
    }
    
    a {
      color: var(${this.themeVarService.link.default.text}) !important;
      
      &:hover {
        color: var(${this.themeVarService.link.default.textHover}) !important;
      }
    }
  }
}
`
  }
}
